<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body style="height: 80%; margin: 230">
		<div id="container" style="height: 70%; -webkit-tap-highlight-color: transparent; 
       	 user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1510818956411">
			<div style="position: relative; overflow: hidden; width: 400px; height: 448px; padding: 0px; margin: 0px; 
       	 	border-width: 0px; cursor: default;">
				<canvas width="400" height="448" data-zr-dom-id="zr_0" style="position: absolute; left: -100px; top: 0px; 
       	 		 height: 848px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
       	 		 padding: 0px; margin: 0px; border-width: 0px;">
       	 	</canvas></div>
		</div>
		<script type="text/javascript" src="public/js/echarts-all-3.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var inputstudentCount=${inputStudentCount}
			var count1=${count1}
			var count2=${count2}
			var count3=${count3}
			var count4=${count4}
			var app = {};
			option = null;
			option = {
				title: {
					text: '中科韬睿所有学员',
					subtext: '2010~2017',
					x: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['已录入', '已退学', '在读中', '已就业']
				},
				series: [{
					name: '学员情况',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: [{
						value: inputstudentCount,
						name: '已录入'
					}, {
						value: count2,
						name: '已退学'
					}, {
						value: count1,
						name: '在读中'
					}, {
						value: count4,
						name: '已就业'
					},{
						value: count3,
						name: '就业中'
					}],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};;
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>

	</body>
</html>